<!-- 用户管理 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 部门树 -->
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <DeptTree v-model="queryParams.deptId" @node-click="handleQuery" />
      </el-col>

      <!-- 用户列表 -->
      <el-col :lg="20" :xs="24">
        <div class="search-bar">
          <el-form ref="queryFormRef" class="search-form" :model="queryParams" :inline="true">
            <el-form-item label="关键字" prop="keywords" style="height: 52px" class="formItem">
              <el-input
                v-model="queryParams.keywords"
                placeholder="用户名/昵称/手机号"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <el-form-item label="状态" prop="status" class="formItem">
              <el-select
                v-model="queryParams.status"
                placeholder="全部"
                clearable
                class="!w-[100px]"
              >
                <el-option label="正常" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>

            <el-form-item label="创建时间" class="formItem">
              <el-date-picker
                v-model="queryParams.createTime"
                :editable="false"
                class="!w-[240px]"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="截止时间"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>

            <el-form-item class="formItem">
              <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
              <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never">
          <div class="flex-x-between mb-10px">
            <div>
              <el-button
                v-hasPerm="['sys:user:add']"
                type="success"
                icon="plus"
                @click="handleOpenDialog()"
              >
                新增
              </el-button>
              <el-button
                v-hasPerm="'sys:user:delete'"
                type="danger"
                icon="delete"
                :disabled="selectIds.length === 0"
                @click="handleDelete()"
              >
                删除
              </el-button>
            </div>
            <div>
              <el-button
                v-hasPerm="'sys:user:import'"
                icon="upload"
                @click="handleOpenImportDialog"
              >
                导入
              </el-button>

              <el-button v-hasPerm="'sys:user:export'" icon="download" @click="handleExport">
                导出
              </el-button>

              <!-- 管理规程 Popover -->
              <el-popover
                ref="popover"
                placement="bottom"
                width="200"
                trigger="hover"
                content-class="popover-content"
              >
                <template #reference>
                  <el-button @click="handleClick">管理规程</el-button>
                </template>
              </el-popover>

              <!-- 管理规程 对话框 -->
              <el-dialog v-model="dialogVisible" title="管理规程">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="fileType" label="文件类型" width="120" />
                  <el-table-column prop="name" label="名称" width="200" />
                  <el-table-column prop="number" label="编号" width="200" />
                  <el-table-column prop="addDate" label="添加日期" width="150" />
                  <el-table-column label="操作" width="120">
                    <template #default="{ row }">
                      <el-button type="text" size="small" @click="handleDelete(row)">
                        删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleSubmit">确 定</el-button>
                  </span>
                </template>
              </el-dialog>

              <!-- 内层新增对话框 -->
              <el-dialog v-model="innerDialogVisible" title="新增" width="30%">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="类型">
                    <el-radio-group v-model="form.type">
                      <el-radio label="SMP">SMP</el-radio>
                      <el-radio label="SOP">SOP</el-radio>
                      <el-radio label="SOR">SOR</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="名称">
                    <el-input v-model="form.name" placeholder="请输入名称" />
                  </el-form-item>
                  <el-form-item label="编号">
                    <el-input v-model="form.number" placeholder="请输入编号" />
                  </el-form-item>
                  <el-form-item label="文件">
                    <el-input v-model="form.file" placeholder="请输入文件名" />
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="innerDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleAddSubmit">确 定</el-button>
                </span>
              </el-dialog>
            </div>
          </div>

          <el-table
            v-loading="loading"
            class="tableForm"
            :data="pageData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="username">
              <template #header>
                <span style="color: #48b16a">用户名</span>
              </template>
            </el-table-column>
            <el-table-column label="昵称" width="150" align="center" prop="nickname">
              <template #header>
                <span style="color: #48b16a">昵称</span>
              </template>
            </el-table-column>
            <el-table-column label="性别" width="100" align="center" prop="gender">
              <template #header>
                <span style="color: #48b16a">性别</span>
              </template>
            </el-table-column>
            <el-table-column label="部门" width="120" align="center" prop="deptName">
              <template #header>
                <span style="color: #48b16a">部门</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号码" align="center" prop="mobile" width="120">
              <template #header>
                <span style="color: #48b16a">手机号码</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" prop="status" width="80">
              <template #header>
                <span style="color: #48b16a">状态</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="150">
              <template #header>
                <span style="color: #48b16a">创建时间</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" width="220">
              <template #header>
                <span style="color: #48b16a">操作</span>
              </template>
              <template #default="scope">
                <el-button
                  v-hasPerm="'sys:user:password:reset'"
                  type="primary"
                  icon="RefreshLeft"
                  size="small"
                  link
                  @click="hancleResetPassword(scope.row)"
                >
                  重置密码
                </el-button>
                <el-button
                  v-hasPerm="'sys:user:edit'"
                  type="primary"
                  icon="edit"
                  link
                  size="small"
                  @click="handleOpenDialog(scope.row.id)"
                >
                  编辑
                </el-button>
                <el-button
                  v-hasPerm="'sys:user:delete'"
                  type="danger"
                  icon="delete"
                  link
                  size="small"
                  @click="handleDelete(scope.row.id)"
                >
                  删除
                </el-button>
                <el-button
                  type="primary"
                  class="no-background-no-border-button"
                  icon="view"
                  @click="handleOpenForm(scope.row)"
                >
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog v-model="formVisible" title="查看人员" width="50%">
            <el-form>
              <!-- 新增的姓名输入框 -->
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input v-model="form.name" placeholder="请输入姓名" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="账号">
                    <el-input v-model="form.account" placeholder="请输入账号" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="手机">
                    <el-input v-model="form.phone" placeholder="请输入手机号" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别">
                    <el-input v-model="form.gender" placeholder="请输入性别" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="职位">
                    <el-input v-model="form.position" placeholder="请输入职位" />
                  </el-form-item>
                </el-col>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="简历">
                      <div style="display: flex; align-items: center">
                        <el-input
                          v-model="resumeUrl"
                          :placeholder="resumePlaceholder"
                          style="width: 70%"
                        />
                        <el-button
                          v-if="resumeUrl"
                          type="plain"
                          icon="view"
                          size="small"
                          circle
                          style="margin-left: 5px; border: none"
                          @click="handleOpenResumeImage"
                        />
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="劳动合同">
                      <div style="display: flex; align-items: center">
                        <el-input
                          v-model="contractUrl"
                          :placeholder="contractPlaceholder"
                          style="width: 70%"
                        />
                        <el-button
                          v-if="contractUrl"
                          type="plain"
                          icon="view"
                          size="small"
                          circle
                          style="margin-left: 5px; border: none"
                          @click="handleOpenContractImage"
                        />
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-col :span="12">
                  <!-- 示例图片 -->
                  <!-- <el-form-item label="示例图片">
                    <div style="display: flex; align-items: center">
                      <img
                        :src="imageUrl"
                        alt="图片"
                        width="100"
                        height="100"
                        style="margin-right: 10px"
                      />
                      <el-button
                        type="text"
                        icon="el-icon-view"
                        size="small"
                        @click="handleOpenPdfViewer"
                      >
                        查看PDF
                      </el-button>
                    </div>
                  </el-form-item> -->
                </el-col>
              </el-row>

              <el-form-item>
                <el-button type="primary" @click="handleSubmitUserForm">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          <!-- PDF 查看弹窗 -->
          <el-dialog v-model="pdfDialogVisible" title="查看PDF" width="80%" center>
            <iframe v-if="pdfUrl" :src="pdfUrl" width="100%" height="600px" frameborder="0" />
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="pdfDialogVisible = false">关闭</el-button>
              </div>
            </template>
          </el-dialog>
          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 用户表单 -->
    <el-drawer
      v-model="dialog.visible"
      :title="dialog.title"
      append-to-body
      @close="handleCloseDialog"
    >
      <el-form ref="userFormRef" :model="formData" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="formData.username"
            :readonly="!!formData.id"
            placeholder="请输入用户名"
          />
        </el-form-item>

        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
        </el-form-item>

        <el-form-item label="所属部门" prop="deptId">
          <el-tree-select
            v-model="formData.deptId"
            placeholder="请选择所属部门"
            :data="deptOptions"
            filterable
            check-strictly
            :render-after-expand="false"
          />
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <Dict v-model="formData.gender" code="gender" />
        </el-form-item>

        <el-form-item label="角色" prop="roleIds">
          <el-select v-model="formData.roleIds" multiple placeholder="请选择">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
        </el-form-item>
        <el-form-item label="简历" prop="resume">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :before-upload="beforeAvatarUpload"
            :on-success="handleFileSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/pdf文件，且不超过2MB</div>
          </el-upload>

          <!-- 预览按钮 -->
          <el-button v-if="formData.resume" @click="previewFile(formData.resume)">
            预览简历
          </el-button>
          <el-button v-if="formData.contract" @click="previewFile(formData.contract)">
            预览劳动合同
          </el-button>
        </el-form-item>

        <!-- 新增的劳动合同上传部分 -->
        <el-form-item label="劳动合同" prop="contract">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleContractUploadSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-button v-if="!formData.contract" type="primary">上传劳动合同</el-button>
            <div v-else>
              <el-button type="text" @click="formData.contract = null">删除</el-button>
              <el-button type="primary" @click="handleContractUpload">重新上传</el-button>
            </div>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
        </el-form-item> -->

        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="formData.status"
            inline-prompt
            active-text="正常"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 用户导入 -->
    <UserImport v-model="importDialogVisible" @import-success="handleQuery()" />
  </div>
</template>
<script setup lang="ts">
import UserAPI, { UserForm, UserPageQuery, UserPageVO } from "@/api/system/user";
import DeptAPI from "@/api/system/dept";
import RoleAPI from "@/api/system/role";
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import DeptTree from "./components/DeptTree.vue";
import UserImport from "./components/UserImport.vue";
import { useThrottleFn } from "@vueuse/core";

// 定义下拉选项类型
type OptionType = {
  label: string;
  value: string | number;
};

// 标志变量-pdf弹出框
const centerDialogVisible = ref(false);
const queryFormRef = ref(null);
const userFormRef = ref(null);
// 控制弹窗显示
const formVisible = ref(false); // 控制查看表单弹窗
const pdfDialogVisible = ref(false);
const pdfUrl = ref(""); // 新增用于存储PDF文件URL的响应式变量
const exampleImageUrl = ref("https://via.placeholder.com/100"); // 示例图片的URL
const contractImageUrl = ref(""); // 合同图片的URL
const resumeUrl = ref("");
const contractUrl = ref("");
// 合同是否已上传
const contractUploaded = ref(false);

// 计算属性
const resumePlaceholder = computed(() => (resumeUrl.value ? "已上传" : "未上传"));
const contractPlaceholder = computed(() => (contractUrl.value ? "已上传" : "未上传"));

const formData = reactive<UserForm>({
  id: undefined,
  status: 1,
});
// 定义对话框显示状态
const dialogVisible = ref(false); // 管理规程对话框
const innerDialogVisible = ref(false); // 内层新增对话框

const form = reactive({
  type: "",
  name: "",
  number: "",
  file: "",
});
// 表格数据
const tableData = ref([
  // 假数据，按需更新
  { fileType: "SMP", name: "文件1", number: "001", addDate: "2024-01-01" },
  { fileType: "SOP", name: "文件2", number: "002", addDate: "2024-01-02" },
]);

// 点击“新增”按钮时，打开内层对话框
const handleAdd = () => {
  innerDialogVisible.value = true;
};

// 提交新增表单
const handleAddSubmit = () => {
  console.log("新增数据：", form.value);
  // 在这里可以进行表单提交操作

  // 关闭内层对话框
  innerDialogVisible.value = false;
};

// // 删除数据
// const handleDelete = (row: any) => {
//   console.log("删除数据：", row);
//    在这里可以进行删除操作
// };

// 提交管理规程表单
const handleSubmitManagement = () => {
  console.log("提交数据");
  // 在这里可以进行表单提交操作
};
// 定义 handleClick 方法
const handleClick = () => {
  dialogVisible.value = true;
};

const rules = reactive({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
  roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
  email: [
    {
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请输入正确的邮箱地址",
      trigger: "blur",
    },
  ],
  mobile: [
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
});

// 选中的用户ID
const selectIds = ref<number[]>([]);
// 部门下拉数据源
const deptOptions = ref<OptionType[]>([]);
// 角色下拉数据源
const roleOptions = ref<OptionType[]>([]);
// 导入弹窗显示状态
const importDialogVisible = ref(false);

// 查询
function handleQuery() {
  loading.value = true;
  UserAPI.getPage(queryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageNum = 1;
  queryParams.deptId = undefined;
  queryParams.createTime = undefined;
  handleQuery();
}

// 选中项发生变化
function handleSelectionChange(selection: any[]) {
  selectIds.value = selection.map((item) => item.id);
}

// 重置密码
function hancleResetPassword(row: UserPageVO) {
  ElMessageBox.prompt("请输入用户【" + row.username + "】的新密码", "重置密码", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  }).then(
    ({ value }) => {
      if (!value || value.length < 6) {
        ElMessage.warning("密码至少需要6位字符，请重新输入");
        return false;
      }
      UserAPI.resetPassword(row.id, value).then(() => {
        ElMessage.success("密码重置成功，新密码是：" + value);
      });
    },
    () => {
      ElMessage.info("已取消重置密码");
    }
  );
}

// 打开弹窗
async function handleOpenDialog(id?: number) {
  dialog.visible = true;
  // 加载角色下拉数据源
  roleOptions.value = await RoleAPI.getOptions();
  // 加载部门下拉数据源
  deptOptions.value = await DeptAPI.getOptions();

  if (id) {
    dialog.title = "修改用户";
    UserAPI.getFormData(id).then((data) => {
      Object.assign(formData, { ...data });
    });
  } else {
    dialog.title = "新增用户";
  }
}

// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  if (userFormRef.value) {
    userFormRef.value.resetFields();
    userFormRef.value.clearValidate();
  }

  formData.id = undefined;
  formData.status = 1;
}

// 提交用户表单（防抖处理）
const handleSubmitUserForm = useThrottleFn(() => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      const userId = formData.id;
      loading.value = true;
      if (userId) {
        UserAPI.update(userId, formData)
          .then(() => {
            ElMessage.success("修改用户成功");
            handleCloseDialog();
            handleResetQuery();
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        UserAPI.add(formData)
          .then(() => {
            ElMessage.success("新增用户成功");
            handleCloseDialog();
            handleResetQuery();
          })
          .finally(() => {
            loading.value = false;
          });
      }
    }
  });
}, 500);

// 删除用户
function handleDelete(id?: number) {
  let userIds: string;
  if (id) {
    userIds = String(id);
  } else {
    userIds = selectIds.value.join(",");
  }
  ElMessageBox.confirm("确认删除选中的用户吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      UserAPI.deleteByIds(userIds).then(() => {
        ElMessage.success("删除成功");
        handleQuery();
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
}

// 查看 PDF 的操作
const handleViewPdf = (pdfUrl: string) => {
  console.log("PDF URL:", pdfUrl);
  if (pdfUrl) {
    centerDialogVisible.value = true;
    // window.open(pdfUrl, "_blank");
  } else {
    ElMessage.error("PDF文件不存在");
  }
};

// 打开导入弹窗
function handleOpenImportDialog() {
  importDialogVisible.value = true;
}

// 导出用户
function handleExport() {
  UserAPI.export(queryParams)
    .then((response: any) => {
      if (response.headers && response.headers["content-disposition"]) {
        const fileName = decodeURI(
          response.headers["content-disposition"].split(";")[1].split("=")[1]
        );
        const fileType =
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
        const fileData = response.data;
        if (fileData) {
          const blob = new Blob([fileData], { type: fileType });
          const downloadUrl = window.URL.createObjectURL(blob);
          const downloadLink = document.createElement("a");
          downloadLink.href = downloadUrl;
          downloadLink.download = fileName;
          document.body.appendChild(downloadLink);
          downloadLink.click();
          document.body.removeChild(downloadLink);
          window.URL.revokeObjectURL(downloadUrl);
        } else {
          ElMessage.error("获取文件数据失败");
        }
      } else {
        ElMessage.error("响应头中缺少必要信息，无法获取文件名");
      }
    })
    .catch((error) => {
      ElMessage.error("导出操作出现错误");
      console.error(error);
    });
}

// 上传前的回调，用于验证文件类型和大小
const beforeAvatarUpload = (file: File) => {
  const isJPGorPDF = file.type === "image/jpeg" || file.type === "application/pdf";
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPGorPDF) {
    ElMessage.error("上传文件只能是 JPG 或 PDF 格式!");
  }
  if (!isLt2M) {
    ElMessage.error("上传文件大小不能超过 2MB!");
  }
  return isJPGorPDF && isLt2M;
};

// 文件上传成功后的处理
const handleFileSuccess = (response: any, file: File, fileList: File[]) => {
  // 假设你有一个字段来区分上传的是简历还是劳动合同
  // 这里假设你有一个方式来确定上传的是哪个文件
  if (file.name.includes("resume")) {
    formData.resume = file;
  } else if (file.name.includes("contract")) {
    formData.contract = file;
  }
};

// 重新上传简历
const handleResumeUpload = () => {
  userFormRef.value.validate((valid: boolean) => {
    if (valid) {
      formData.resume = null;
    }
  });
};

// 重新上传劳动合同
const handleContractUpload = () => {
  userFormRef.value.validate((valid: boolean) => {
    if (valid) {
      formData.contract = null;
    }
  });
};

// 预览文件
const previewFile = (file: File) => {
  const fileURL = URL.createObjectURL(file);
  window.open(fileURL);
};

// 查看简历图片
const handleOpenResumeImage = () => {
  if (resumeUrl.value) {
    pdfDialogVisible.value = true;
    pdfUrl.value = resumeUrl.value;
  } else {
    ElMessage.warning("请先上传简历图片");
  }
};

// 简历上传成功回调
const handleResumeUploadSuccess = (response: any, file: File, fileList: File[]) => {
  if (response.success) {
    formData.resume = response.data;
  } else {
    ElMessage.error(response.message);
  }
};

// 劳动合同上传成功回调
const handleContractUploadSuccess = (response: any, file: File, fileList: File[]) => {
  if (response.success) {
    formData.contract = response.data;
  } else {
    ElMessage.error(response.message);
  }
};

// 查看合同图片
const handleOpenContractImage = () => {
  if (contractUrl.value) {
    pdfDialogVisible.value = true;
    pdfUrl.value = contractUrl.value;
  } else {
    ElMessage.warning("请先上传合同图片");
  }
};

// 查看PDF
const handleOpenPdfViewer = () => {
  if (pdfUrl.value) {
    pdfDialogVisible.value = true;
  } else {
    ElMessage.warning("请先上传PDF文件");
  }
};

// 点击查看按钮打开表单
const handleOpenForm = () => {
  formVisible.value = true;
};

const queryParams = reactive<UserPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

const pageData = ref<UserPageVO[]>([]);
const total = ref(0);
const loading = ref(false);

const dialog = reactive({
  visible: false,
  title: "新增用户",
});

onMounted(() => {
  handleQuery();
});
</script>
<style scoped>
/* .a11 {
  line-height: 50px;
  color: blue;
} */

.button-container {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.no-background-no-border-button {
  background-color: transparent;
  border-color: transparent;
  color: inherit; /* 可选：继承父元素的文字颜色 */
}
/* .button-container .el-button span {
  line-height: 300px;
} */
.app-container {
  background-color: #f7f8fa;
  padding: 20px;
}
.search-bar {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 表格样式 */
.search-bar .search-form {
  display: flex;
  justifu-content: space-between;
}
.search-bar .search-form .formItem {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.el-table {
  width: 100%;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.el-table th,
.el-table td {
  padding: 15px;
  text-align: center;
  font-size: 14px;
}
.el-table th {
  background-color: #f5f5f5;
  color: #48b16a !important;
  font-weight: bold;
}
.el-table .cell {
  color: #333;
}
.tableForm > .el-table-column .cell {
  color: #48b16a !important;
}
.el-tag {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 10px;
}
.el-tag.success {
  background-color: #67c23a;
  color: #fff;
}
.el-tag.info {
  background-color: #909399;
  color: #fff;
}
.el-button {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 4px;
}
.el-button.success {
  background-color: #67c23a;
  border-color: #67c23a;
  color: white;
}
.el-button.danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: white;
}
.el-button.icon {
  color: #409eff;
}
.el-drawer {
  width: 50%;
  max-width: 600px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.el-input,
.el-select,
.el-tree-select {
  width: 100%;
  font-size: 14px;
  padding: 10px;
  /* line-height: 50px; */
}
.el-form-item .el-button {
  width: 100px;
  height: 36px;
  margin-right: 10px;
}
.el-form-item {
  margin-bottom: 16px;
}

.el-form-item label {
  color: #333;
  font-size: 14px;
}
.el-date-picker {
  width: 240px;
}

.el-date-picker__editor {
  font-size: 14px;
  padding: 6px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.pagination .el-button {
  font-size: 14px;
  padding: 6px 12px;
}
.dept-tree {
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
</style>
